<template>
    <div class="app-content">
      <!-- 顶部tips -->
      <div class="tips" ref="tips">
        <h3
          style="
            color: #409eff;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
          "
        >
          售后日报明细
        </h3>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input
              size="small"
              v-model="SearchForm.OrderNo"
              placeholder="请输入您要搜索的订单号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="GetDataList"
              >查询</el-button
            >
            <el-button size="mini" type="success" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 中间表格部分 -->
      <Vue_Table
        v-if="tabaleHeight.length"
        ref="VueTable"
        :tableData="tableData"
        :PageInfo="PageInfo"
        :loading="loading"
        :tabaleHeight="tabaleHeight"
        @DelInfo="DelInfo"
      />
      <!-- 分页部分 -->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="paramsquery.pageIndex"
          :page-size="paramsquery.pageSize"
          layout="total, prev, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 添加弹窗 -->
      <Vue_AddForm :Mobile="Mobile" :PageInfo="PageInfo" @AddOrder="AddOrder" />
      <!-- 修改弹窗 -->
      <Vue_UpdataForm
        :Mobile="Mobile"
        :PageInfo="PageInfo"
        @UpdataList="UpdataInfo"
      />
    </div>
  </template>

  <script>
  import { mapState } from "vuex"; // 引入vuex属性
  import mixin from "@/mixins/mixin"; // 引入mixin
  import {
    GetAfsDailyList,
    addAfsDaily,
    UpdateAfsDaily,
    delAfsDaily,
  } from "@/api/index"; // 引入订单接口
  import Vue_Table from "@/components/table/index"; // 引入表格组件
  import Vue_AddForm from "@/components/addForm/index"; // 引入添加弹窗
  import Vue_UpdataForm from "@/components/updataForm/index"; // 引入修改弹窗
  import { PageInfo } from "./PageInfo"; // 引入页面信息
  export default {
    mixins: [mixin],
    data() {
      return {
        /* 页面信息 */
        PageInfo,
        /* 搜索部分 */
        SearchForm: {
          OrderNo: "",
        },
        /* 表格部分 */
        loading: true,
        tableData: [],
        paramsquery: {
          pageIndex: 1,
          pageSize: 30,
        },
        total: 0,
      };
    },
    computed: {
      ...mapState(["isMobile"]),
    },
    created() {},
    mounted() {
      this.GetDataList();
    },
    watch: {},
    methods: {
      // 请求列表数据
      GetDataList() {
        this.loading = true;
        const data = {
          pageIndex: this.paramsquery.pageIndex,
          searchOrderId:this.SearchForm.OrderNo
        };
        GetAfsDailyList(data).then((res) => {
          // console.log(res);

          this.loading = false;
          res.orderList.map((item) => {
            Object.entries(item).forEach(([key, value]) => {
              if (value === null) {
                item[key] = "";
              }
            });
          });
          this.tableData = res.orderList;
          this.pageIndex = res.pageIndex;
          this.pageSize = res.pageSize;
          this.total = res.pageTotal;
        });
      },
      // 新增一条数据
      onAdd() {
        this.$EventBus.$emit("eventAdd", { show: true });
      },
      // 确认新增e
      AddOrder(e) {
        // console.log(e);
        e.related_pic = e.img;
        delete e.img;
        Object.entries(e).forEach(([key, value]) => {
          if (value === "") {
            e[key] = null;
          }
        });
        e.submit_time = e.submit_time == "" ? null : e.submit_time;
        addAfsDaily(e).then((res) => {
          if (res.msg) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.GetDataList();
            this.$EventBus.$emit("eventAdd", { show: false });
          } else {
            this.$message.error("新增失败");
          }
        });
      },
      // 确认修改
      UpdataInfo(e) {
        // console.log(e);
        e.related_pic = e.img;
        delete e.img;
        Object.entries(e).forEach(([key, value]) => {
          if (value === "") {
            e[key] = null;
          }
        });
        UpdateAfsDaily(e).then((res) => {
          // console.log(res, "修改数据");
          if (res.msg) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.GetDataList();
            this.$EventBus.$emit("eventUpdata", { show: false });
          } else {
            this.$message.error("修改失败");
          }
        });
      },
      // 删除数据
      DelInfo(e) {
        // console.log(e);
        delAfsDaily(e.id).then((res) => {
          if (res.msg) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.GetDataList();
          } else {
            this.$message.error("删除成功");
          }
        });
      },
    },
    components: {
      Vue_Table,
      Vue_AddForm,
      Vue_UpdataForm,
    },
  };
  </script>

  <style scoped lang="less">
  .home {
    width: 100%;
    height: 100%;
  }
  .tips {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
    background-color: #ecf5ff;
  }
  .pagination {
    width: 100%;
    height: 50px !important;
    display: flex;
    align-items: center;
  }
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
  </style>
